<script>
export default {
  name: "tao-tab-bar",
  methods:{
    goGoodsLIst(){
      this.$router.replace({
        path:"/goods-list",
        query:{navBarText:"商品列表"}
      })
    },
    goGoodsSearch(){
      this.$router.replace({
        path:"/goods-search",
        query:{navBarText:"商品搜索"}
      })
    },
    goMyInfo(){
      this.$router.replace({
        path:"/my-info",
        query:{navBarText:"我的"}
      })
    }
  }
}
</script>

<template>
  <section class="tao-tab-bar">
    <div class="layui-panel">
      <div style="padding: 32px;">
        <ul>
          <li @click="goGoodsLIst">
            <span class="iconfont icon-shangpinliebiao"></span>
            <span class="text">商品列表</span>
          </li>
          <li  @click="goGoodsSearch">
            <span class="iconfont icon-sousuo1"></span>
            <span class="text">商品搜索</span>
          </li>
          <li  @click="goMyInfo">
            <span class="iconfont icon-wode1"></span>
            <span class="text">我的信息</span>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<style scoped lang="less">
.tao-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  ul {
    display: flex;
    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      .iconfont{
        font-size: 18px;
      }
      .text{
        margin-top: 10px;
        font-size: 18px;
      }
    }
  }
}
</style>